<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手风琴效果</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div id="subject" class="wrapper">
        <ul>
            <li class="big">
                <a href="#link1">
                    <img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg" alt="图片加载中">
                    <div class="info">
                        <h3 style="color:#f62368">聚美妆</h3>
                        <p>聚美妆1/2周年庆</p>
                        <p class="price"><strong>1</strong><i>折起</i></p>
                    </div>
                    <s class="line"></s>
                    <i class="mask"></i>
                </a>
            </li>
            <li>
                <a href="#link2">
                    <img src="http://gtms01.alicdn.com/tps/i1/T1qxGLFsVbXXbA5QAK-195-120.jpg_Q90.jpg">
                    <div class="info">
                        <h3 style="color:#ff578a">Baby购</h3>
                        <p>宝宝该换装了，新品抢购</p>
                        <p class="price"><strong>2.5</strong><i>折起</i></p>
                    </div>
                    <s class="line"></s> <i class="mask"></i>
                </a>
            </li>
            <li>
                <a href="#link2">
                    <img src="http://gtms02.alicdn.com/tps/i2/T1KOSNFxXaXXbA5QAK-195-120.jpg_Q90.jpg">
                    <div class="info">
                        <h3 style="color:#6d3fa7">时装团</h3>
                        <p>时尚春装，清新小潮搭配</p>
                        <p class="price"><strong>1</strong><i>折起</i></p>
                    </div>
                    <s class="line"></s> <i class="mask"></i>
                </a>
            </li>
            <li>
                <a href="#link3">
                    <img src="http://gtms04.alicdn.com/tps/i4/T1CCeIFrVbXXbA5QAK-195-120.jpg_Q90.jpg">
                    <div class="info">
                        <h3 style="color:#d61939">TV购</h3>
                        <p>补血养颜 就这么简单</p>
                        <p class="price"><strong>2.6</strong><i>折起</i></p>
                    </div>
                    <s class="line"></s><i class="mask"></i>
                </a>
            </li>
            <li>
                <a href="#link4">
                    <img src="http://gtms01.alicdn.com/tps/i1/T1jmKJFyJbXXbA5QAK-195-120.jpg_Q90.jpg">
                    <div class="info">
                        <h3 style="color:#6f9400">聚新鲜</h3>
                        <p>最纯正的泰国香米</p>
                        <p class="price"><strong>5</strong><i>折起</i></p>
                    </div>
                    <i class="mask"></i>
                </a>
            </li>
        </ul>
    </div>
</body>
<script src="index.js"></script>

</html>